<template>
    <div>
        <div style="height: 550px; overflow-y: auto;">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="管理员ID"></el-table-column>
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="created_at" label="创建时间"></el-table-column>
                <el-table-column label="身份">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.role === 'admin'" type="primary">普通管理员</el-tag>
                        <el-tag v-else-if="scope.row.role === 'super_admin'" type="warning">顶级管理员</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">修改密码</el-button>
                        <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除账户</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <!-- 新添加一个输入框用于输入管理员用户名 -->
                    <el-input v-model="form.username" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="form.password" autocomplete="off" show-password></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import MGTAPI from '../../api/management';
export default {
    data() {
        return {
            tableData: [],
            dialogVisible: false,
            form: {
                username: '', // 新添加一个属性用于存储管理员用户名
                password: ''
            }
        };
    },
    methods: {

        handleEdit(index, row) {
            // 将当前管理员用户名存储在 form 对象中，在“确定”按钮点击事件中使用
            this.form.username = row.username;
            this.dialogVisible = true;
        },
        handleDelete(index, row) {
            this.$confirm('确认删除该管理员账户吗？', '提示', { type: 'warning' }).then(() => {
                this.deleteAdminOne(row)
                this.tableData.splice(index, 1);
            });
        },
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    // 调用 changepass 方法，传入管理员用户名和新密码
                    this.changepass({ username: this.form.username, password: this.form.password });
                    this.dialogVisible = false;
                } else {
                    this.$message.warning('请填写完整信息');
                }
            });
        },
        getAllAdminList() {
            MGTAPI.getAllAdmin().then(res => {
                console.log(res);

                // 直接用返回的数据更新tableData，在表格列上进行属性调整
                this.tableData = res.data.data.map(admin => {
                    return {
                        id: admin.id,
                        username: admin.username,
                        role: admin.isSystem === 1 ? 'super_admin' : 'admin',
                        created_at: admin.createTime
                    };
                });
            }).catch(error => {
                console.log(error);
            });
        },
        changepass(data) {
            MGTAPI.changeAdminPass(data).then(res => {
                console.log(res);
                if (res.data.code) {
                    this.$message.success(data.username + '修改密码成功');
                } else {
                    this.$message.error(res.data.msg)
                }
            }).catch(error => {
                console.log(error);
            });
        },
        deleteAdminOne(row) {
            let data = {}
            data.username = row.username
            MGTAPI.deleteAdminApi(data).then(res => {
                if (res.data.code) {
                    this.$message.success(data.username + '删除账户成功!');
                } else {
                    this.$message.error(res.data.msg)
                }
            })
        }
    },
    created() {
        this.getAllAdminList();
    },
};
</script>
  